﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 
  </head>
  <body>
  	<table id="tableID" border="1" align="center" width="60%">
  		<thead>
	  		<tr>	
	  			<th>用户名</th>
	  			<th>密码</th>
	  			<th>操作</th>
	  		</tr>
  		</thead>
  		<tbody id="tbodyID">
  			<!-- 动态增加行 
  			<tr>
  				<td>哈哈</td>
  				<td>123</td>
  				<td><input type="button" value="删除" onclick=""/></td>
  			</tr>
  			-->
  		</tbody>
  	</table>
  	
  	<hr/>
  	用户名：<input type="text" id="usernameID"/>
  	密码：  <input type="text" id="passwordID"/>
  			<input type="button" value="增加" id="addID"/>
  			
  </body>
  
  <script type="text/javascript">
  		//定位"增加"按钮，同时添加单击事件
  		$("#addID").click(function(){
  			//获取用户名和密码的值
  			var username = $("#usernameID").val();
  			var password = $("#passwordID").val();
  			//去掉二边的空格
  			username = $.trim(username);
  			password = $.trim(password);
  			//如果用户名或密码没有填
  			if(username.length == 0 || password.length == 0){
				//提示用户  				
  				alert("用户名或密码没有填");
  			}else{
  				//创建1个tr标签
  				var $tr = $("<tr></tr>");
  				//创建3个td标签
  				var $td1 = $("<td>"+username+"</td>");
  				var $td2 = $("<td>"+password+"</td>");
  				var $td3 = $("<td></td>");
  				//创建input标签，设置为删除按钮
  				var $del = $("<input type='button' value='删除'>");
  				//为删除按钮动态添加单击事件
  				$del.click(function(){
  					//删除按钮所有的行，即$tr对象
  					$tr.remove();
  				});
  				//将删除按钮添加到td3标签中
  				$td3.append($del);
  				//将3个td标签依次添加到tr标签中
  				$tr.append($td1);
  				$tr.append($td2);
  				$tr.append($td3);
  				//将tr标签添加到tbody标签中
  				$("#tbodyID").append($tr);
  				//清空用户名和密码文本框中的内容
  				$("#usernameID").val("");
  				$("#passwordID").val("");
  			}
  		});
  </script>
  
</html>



